{% extends 'index.html' %}
{% block ace-content %}
<script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
<link href="/static/dist/css/bootstrap-multiselect.css" rel="stylesheet">
<script src="/static/dist/js/bootstrap-multiselect.js"></script>
{% endblock %}
{% block page-content %}
<div id="page-wrapper">
    <div class="row">
         <div class="col-lg-12">
              <h1 class="page-header"><i class="fa   fa-floppy-o"></i>  <code>Wiki</code>知识</h1>
         </div>
                <!-- /.col-lg-12 -->
    </div>
	<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
 						<i class="fa    fa-pencil-square-o"> </i> 添加文章
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-8">
                                    <form role="form" class="main form-horizontal" >{% csrf_token %}
										<fieldset>
										<div class="form-group">
											 <label class="col-sm-1 control-label">标题</label>
											 <div class="col-sm-10">
											 	<input type="text" class="form-control" id="title" placeholder="文章标题" value="" class="input-xlarge"  required/>
											 </div>
										</div>										
										<div class="form-group">
											 <label class="col-sm-1 control-label">内容</label>
											 <div class="col-sm-10">
											 	<textarea id="content" class="ckeditor"></textarea>
											 </div>
										</div>	
							
										<div class="form-group">
											 <label class="col-sm-1 control-label">分类</label>
											 <div class="col-sm-2">
											   <select  class="form-control" name="category" id="select_category"   required>
											   		<option value="" name="category" >请选择分类</option>
											   		{% for ds in categoryList %}
														<option value="{{ds.id}}" name="category">{{ds.name}}</option>
													{% endfor %}			   		
												</select>
											 </div>											 
										</div>		
							
										<div class="form-group">
											 <label class="col-sm-1 control-label">标签</label>
											 <div class="col-sm-2 ">
											   <select multiple class="form-control" id="select_tag"  required>
											   		<option value="">请选择标签</option>
											   		{% for ds in tagList %}
														<option value="{{ds.id}}" name="tag">{{ds.name}}</option>
													{% endfor %}		   		
												</select>																							
											 </div>										 
										</div>	
										<div class="form-group">
											<label class="col-sm-1 control-label"></label>
											<div class="col-sm-2">
									 		<button type="button" id="button" onclick="AddWikiArticle(this)"  class="btn btn-default" >提交</button>
									 		</div>
										</div>											
										</form>                                        
                                </div>
				                <div class="col-lg-4">
				                    <div class="panel panel-default">
				                        <div class="panel-heading">
				                            	<i class="fa   fa-comments-o   "></i> 分类管理
				                        </div>
				                        <!-- /.panel-heading -->
				                        <div class="panel-body">
				                        	<div>
				                        		<button type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#myCategoryModal"><i class="glyphicon glyphicon-plus"></i></button>
				                        	</div>
											<table  width="100%" class="table table-striped table-bordered table-hover dataTable no-footer" id="addCategory">						
					                                <thead>
															<tr>
																<th class="text-center">
																	<label>
																		<span class="lbl"></span>
																	</label>
																	ID
																</th>
																<th class="text-center">SQL内容</th>				
																<th class="text-center">操作</th>
															</tr>											    
					                                </thead>
					                                <tbody>
					                                	{% for ds in categoryList %}
					                                		<tr>
						                                		<td class="text-center">
						                                			{{ds.id}}
						                                		</td>
				
						                                		<td class="text-center">
						                                			<span class="tooltip-test" data-toggle="tooltip" title="{{ds.sql}}">{{ds.name }}</span>
						                                		</td>
						                                		
						                                		<td class="text-center">
																	<div>																				
																		<div class="btn-group">	
																			<button type="button" class="btn btn-xs btn-default" onclick="modfCategory(this,{{ ds.id}})">
																				<abbr title="編輯分类"><i class="fa fa-edit"></i>
																			</button>
																		</div>
																		<div class="btn-group">	
																			<button type="button" class="btn btn-xs btn-default" onclick="delCategory(this,'{{ds.name}}',{{ ds.id}})">
																				<abbr title="删除分类"><i class="fa fa-trash"></i>
																			</button>											
																		</div>
																	</div>  	                                			
						                                		</td>	
					                                		</tr>                                			                                		                                			                                			                                			                                		
					                                	{% endfor %}
					                                </tbody>
					                       	</table>
				                            <!-- /.table-responsive -->
				                        </div>
				                        <!-- /.panel-body -->
				                    </div>
				                </div> 
				                <div class="col-lg-4">
				                    <div class="panel panel-default">
				                        <div class="panel-heading">
				                            	<i class="fa   fa-comments-o   "></i> 标签管理
				                        </div>
				                        <!-- /.panel-heading -->
				                        <div class="panel-body">
				                        	<div>
				                        		<button type="button" class="btn btn-xs btn-default" data-toggle="modal" data-target="#myTagModal"><i class="glyphicon glyphicon-plus"></i></button>
				                        	</div>
											<table  width="100%" class="table table-striped table-bordered table-hover dataTable no-footer" id="addTag">						
					                                <thead>
															<tr>
																<th class="text-center">
																	<label>
																		<span class="lbl"></span>
																	</label>
																	ID
																</th>
																<th class="text-center">SQL内容</th>				
																<th class="text-center">操作</th>
															</tr>											    
					                                </thead>
					                                <tbody>
					                                	{% for ds in tagList %}
					                                		<tr>
						                                		<td class="text-center">
						                                			{{ds.id}}
						                                		</td>
				
						                                		<td class="text-center">
						                                			<span class="tooltip-test" data-toggle="tooltip" title="{{ds.name}}">{{ds.name }}</span>
						                                		</td>
						                                		
						                                		<td class="text-center">
																	<div>																				
																		<div class="btn-group">	
																			<button type="button" class="btn btn-xs btn-default" onclick="modfTag(this,{{ ds.id}})">
																				<abbr title="編輯标签"><i class="fa fa-edit"></i>
																			</button>
																		</div>
																		<div class="btn-group">	
																			<button type="button" class="btn btn-xs btn-default" onclick="delTag(this,'{{ds.name}}',{{ ds.id}})">
																				<abbr title="删除标签"><i class="fa fa-trash"></i>
																			</button>											
																		</div>
																	</div>  	                                			
						                                		</td>	
					                                		</tr>                                			                                		                                			                                			                                			                                		
					                                	{% endfor %}
					                                </tbody>
					                       	</table>
				                            <!-- /.table-responsive -->
				                        </div>
				                        <!-- /.panel-body -->
				                    </div>
				                </div> 

                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <div class="panel-footer"></div>
                    <!-- /.panel -->
                </div>
    </div>    
	<div class="modal fade" id="myTagModal" tabindex="-1" role="dialog" aria-labelledby="myTagModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myTagModalLabel">
						添加标签
					</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="tag">
						<div class="form-group">				
							<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>标签名称</strong></label>																												
							<div class="col-sm-6">
								<input class="form-control" type="text" name="name"/>	
							</div>											
						</div>									
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary" onclick="addWikiData(this,'tag')">
						添加
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>  
	
	<div class="modal fade" id="myCategoryModal" tabindex="-1" role="dialog" aria-labelledby="myCategoryModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myCategoryModalLabel">
						添加分类
					</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="category">
						<div class="form-group">				
							<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>分类名称</strong></label>																												
							<div class="col-sm-6">
								<input class="form-control" type="text" name="name"/>	
							</div>											
						</div>									
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="button" class="btn btn-primary" onclick="addWikiData(this,'category')">
						添加
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>  	
	  
</div>

<script type="text/javascript">

	$(document).ready(function() {
	    $('#addCategory').DataTable();
	} ); 	

	$(document).ready(function() {
	    $('#addTag').DataTable();
	} ); 	
	
	function  modfCategory(obj,id){
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var post_data = {}; 		
		window.wxc.xcConfirm("请输入新名称：", window.wxc.xcConfirm.typeEnum.input,{
			onOk:function(result){
				if (result.length == 0){
					/* 如果没有输入字符串则直接退出 */
					return;
				};				
				$.ajax({
					  type: 'PUT',
					  url: '/api/wiki/category/'+ id +'/',
					  data:{
						  'name':result
					  },
				      success:function(response){	
				    	  btnObj.removeAttr('disabled');
			              window.wxc.xcConfirm("修改成功", window.wxc.xcConfirm.typeEnum.success);	
			              location.reload();
					},
		            error:function(response){
		            	btnObj.removeAttr('disabled');
		            	window.wxc.xcConfirm("修改失败", window.wxc.xcConfirm.typeEnum.error);
		            },							  
					});
				
			}
		});								   
   }	
	
	function delCategory(obj,name,id){
		var btnObj = $(obj);
		var txt=  "是否确认删除？";	
		var option = {
				title: "删除数据("+name+")配置",
				btn: parseInt("0011",2),
				onOk: function(){
					$.ajax({
						  type: 'DELETE',
						  url: '/api/wiki/category/'+ id +'/',
					      success:function(response){			            
								btnObj.removeAttr('disabled');
								window.wxc.xcConfirm("分类删除成功", window.wxc.xcConfirm.typeEnum.success);
								location.reload();					                
						},
			            error:function(response){
				    		btnObj.removeAttr('disabled');
				    		window.wxc.xcConfirm("分类删除失败~", window.wxc.xcConfirm.typeEnum.error);
			            },		
						});
				},
				onCancel:function(){	
				},
				onClose:function(){
				}
			}			
		window.wxc.xcConfirm(txt, "custom", option);
	}	
	
	function  modfTag(obj,id){
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var post_data = {}; 		
		window.wxc.xcConfirm("请输入新名称：", window.wxc.xcConfirm.typeEnum.input,{
			onOk:function(result){
				if (result.length == 0){
					/* 如果没有输入字符串则直接退出 */
					return;
				};				
				$.ajax({
					  type: 'PUT',
					  url: '/api/wiki/tag/'+ id +'/',
					  data:{
						  'name':result
					  },
				      success:function(response){	
				    	  btnObj.removeAttr('disabled');
			              window.wxc.xcConfirm("标签修改成功", window.wxc.xcConfirm.typeEnum.success);	
			              location.reload();
					},
		            error:function(response){
		            	btnObj.removeAttr('disabled');
		            	window.wxc.xcConfirm("标签修改失败", window.wxc.xcConfirm.typeEnum.error);
		            },							  
					});
				
			}
		});								   
   }	
	
	function delTag(obj,name,id){
		var btnObj = $(obj);
		var txt=  "是否确认删除？";	
		var option = {
				title: "删除数据("+name+")配置",
				btn: parseInt("0011",2),
				onOk: function(){
					$.ajax({
						  type: 'DELETE',
						  url: '/api/wiki/tag/'+ id +'/',
					      success:function(response){			            
								btnObj.removeAttr('disabled');
								window.wxc.xcConfirm("标签删除成功", window.wxc.xcConfirm.typeEnum.success);
								location.reload();					                
						},
			            error:function(response){
				    		btnObj.removeAttr('disabled');
				    		window.wxc.xcConfirm("标签删除失败~", window.wxc.xcConfirm.typeEnum.error);
			            },		
						});
				},
				onCancel:function(){	
				},
				onClose:function(){
				}
			}			
		window.wxc.xcConfirm(txt, "custom", option);
	}	
	
	$(document).ready(function() {
	    $('#select_tag').multiselect({
	        enableClickableOptGroups: true,
	        enableCollapsibleOptGroups: true,
	        includeSelectAllOption: true,
	       	enableFiltering: true,   
	       	buttonWidth: '205px'
	    });
	    $('#select_category').multiselect({
	        enableClickableOptGroups: true,
	        enableCollapsibleOptGroups: true,
	        includeSelectAllOption: true,
	       	enableFiltering: true,   
	       	buttonWidth: '205px'
	    });    
	});
	
	CKEDITOR.replace('content', {
	   filebrowserUploadUrl: '/wiki/upload/',
	   height: '500px',
	   width: '100%',
	});

	function getSelectValue(id){
	    var select = document.getElementById(id);
	    var val = [];
	    for(i=0;i<select.length;i++){
	        if(select.options[i].selected){
 	        	val.push(select[i].value); 
	        }
	    }
	    return val;
	}

	function AddWikiArticle(obj){
		tags = getSelectValue("select_tag")
		categorys = getSelectValue("select_category")
		if (tags.length == 0){
			window.wxc.xcConfirm("请选择一个标签", window.wxc.xcConfirm.typeEnum.error); 
			return false;
		};
		if (categorys.length == 0){
			window.wxc.xcConfirm("请选择一个分类", window.wxc.xcConfirm.typeEnum.error); 
			return false;
		}; 
		$.ajax({
			dataType: "JSON",
			url:'/wiki/add/', //请求地址
			type:"POST",  //提交类似
			data:{
				"title":document.getElementById("title").value,
				"content":CKEDITOR.instances.content.getData(),
				"tag":tags,/* $('#select_tag option:selected').val(), */
				"category": $('#select_category option:selected').val(),
			}, //提交参数
			success:function(response){
                if (response["code"]=="200"){ 
                	window.wxc.xcConfirm("文章添加成功", window.wxc.xcConfirm.typeEnum.success);
                 	location.reload(); 
                }
	        	else{
	        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
	        	};					
			},
	    	error:function(response){
	   			window.wxc.xcConfirm("文章添加失败", window.wxc.xcConfirm.typeEnum.error); 
	    	}
		})		
	}
	
	function addWikiData(obj,op) {
		var btnObj = $(obj);
		btnObj.attr('disabled',true);
		var post_data = {}; 
		if (op=="tag"){
			var putUrl = '/api/wiki/tag/';
			var form = document.getElementById('tag');
		}
		else if (op=="category"){
			var putUrl = '/api/wiki/category/';
			var form = document.getElementById('category');
		}
		for (var i = 0; i < form.length; ++i) {
			var name = form[i].name;
			var value = form[i].value;
			if ( value.length == 0){
				window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
				btnObj.removeAttr('disabled');
				return false;
			}
			else{
				post_data[name] = value;
			};
			
		};
		$.ajax({
			dataType: "JSON",
			url:putUrl, //请求地址
			type:"POST",  //提交类似
			data:post_data, //提交参数
			success:function(response){
				btnObj.removeAttr('disabled');
				window.wxc.xcConfirm("添加成功", window.wxc.xcConfirm.typeEnum.success);
				location.reload();	 	
			},
	    	error:function(response){
	    		btnObj.removeAttr('disabled');
	    		window.wxc.xcConfirm("添加失败", window.wxc.xcConfirm.typeEnum.error);
	/* 	    		location.reload(); */
	    	}
		})	
	}
		
</script>

{% endblock %}